<template>
  <div class="article-page" :class="{ mobile: isMobile }">
    <div class="module">
      <article-content :fetching="fetching" :article="article" />
    </div>

    <div class="comment">
      <comment :fetching="fetching" :article-id="articleId" :likes="article?.meta?.likes" />
    </div>
  </div>
</template>

<script>
import {
  computed,
  defineComponent,
  onBeforeMount,
  watch
} from "vue";
import Comment from "@/components/comment/index.vue";
import SkeletonLine from "@/components/skeleton/line.vue";
import SkeletonParagraph from "@/components/skeleton/paragraph.vue";
import ArticleContent from "./content.vue";
import { useEnhandle } from "@/enhandle";
import { scrollToTop } from "@/utils/effects";
import { onClient } from "@/universal";

export default defineComponent({
  name: "Article",
  components: {
    SkeletonLine,
    SkeletonParagraph,
    ArticleContent,
    Comment
  },
  props: {
    articleId: {
      type: Number,
      required: true,
    },
  },
  setup(props) {
    const { store } = useEnhandle();
    const article = computed(() => store.state.article.detail.data);
    const fetching = computed(() => store.state.article.detail.fetching);
    const isMobile = computed(() => store.state.global.isMobile);

    const fetchArticleDetail = (article_id) => {
      onClient(scrollToTop)
      return Promise.all([
        store.dispatch("article/getArticleDetail", {
          article_id,
        }),
        store.dispatch("comment/fetchList", {
          article_id,
        }),
      ]);
    };

    onBeforeMount(() => {
      watch(
        () => props.articleId,
        (articleId) => fetchArticleDetail(articleId)
      )
    });

    fetchArticleDetail(props.articleId)

    return {
      article,
      fetching,
      isMobile,
    };
  },
});
</script>

<style lang="scss" scoped>
.article-page {
  .module {
    margin-bottom: $lg-gap;
    @include radius-box($sm-radius);
    @include common-bg-module();
  }

  .releted {
    margin-bottom: $lg-gap;
  }

  &.mobile {
    .module {
      margin-bottom: $gap;
    }
  }
}
</style>
